<template>
    <div class="block_main blue-tit">
        <el-row style="padding-top: 10px">
            <el-col :span="24" style="padding:0 5px">
                <el-card>
                    <div class="title">菜单列表</div>
                    <!-- 筛选 -->
                    <!-- <el-form
                        style="padding:20px 20px 0"
                        :inline="true"
                        :model="region"
                        class="demo-form-inline"
                        size="small"
                    >
                        <el-form-item label="菜单名称">
                            <el-input v-model="filterName"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="Filter" type="primary">查询</el-button>
                            <el-button type="success" @click="addUser">新建用户</el-button>
                        </el-form-item>
                    </el-form>-->
                    <!-- 筛选结束 -->
                    <!-- 表格内容组件 -->
                    <el-table :data="tableData5" style="width: 100%">
                        <el-table-column label="菜单名称" prop="name"></el-table-column>
                        <el-table-column label="子菜单" prop="children">
                            <template slot-scope="scope">
                                <p class="tags">
                                    <el-tag
                                        v-for="tag in scope.row.children"
                                        :key="tag.name"
                                        closable
                                        @close="handleClose(tag,scope.row.children)"
                                    >{{tag.name}}</el-tag>
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="180">
                            <template slot-scope="scope">
                                <!-- <el-button type="text" @click="delList(scope.row)" size="mini">删除</el-button> -->
                                <el-button type="text" size="mini" @click="editFn(scope.row)">编辑</el-button>
                                <el-button type="text" size="mini" @click="addFn(scope.row)">添加</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 翻页 -->
                    <div class="zpage">
                        <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="currentPage"
                            :page-size.sync="pagesize"
                            layout="total, prev, pager, next, jumper"
                            :total.sync="pagetotal"
                        ></el-pagination>
                    </div>
                    <!-- 翻页 end -->
                </el-card>
            </el-col>
        </el-row>

        <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="菜单名称" v-if="isAdd">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-checkbox-group
                    v-else
                    v-model="checkedCities"
                    @change="handleCheckedCitiesChange"
                >
                    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                </el-checkbox-group>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible=false">取 消</el-button>
                <el-button size="small" type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<style>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
.tags .el-tag {
    margin-right: 10px;
}
</style>

<script>
import actionurl from "@/assets/js/actionurl";
import config from "@/config.js";

export default {
    data() {
        return {
            cities: ["上海", "北京", "广州", "深圳"],
            checkedCities: [],
            form: {},
            region: {},
            isAdd: true,
            filterName: "",
            tableData5: [
                {
                    name: "品牌",
                    id: 1,
                    children: [
                        { name: "品牌1", id: "2" },
                        { name: "品牌2", id: "3" },
                        { name: "品牌3", id: "4" }
                    ]
                },
                {
                    name: "吨位",
                    id: 2,
                    children: [
                        { name: "吨位1", id: "21" },
                        { name: "吨位2", id: "31" },
                        { name: "吨位3", id: "41" }
                    ]
                }
            ],
            currentPage: 1,
            pagesize: 10,
            pagetotal: 10000,
            scontent: "",
            title: "菜单信息",
            dialogVisible: false,
            thisID: ""
        };
    },
    methods: {
        //多选操作
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate =
                checkedCount > 0 && checkedCount < this.cities.length;
        },
        //添加菜单
        addFn() {
            this.dialogVisible = true;
            this.isAdd = true;
        },
        handleClose(tag, arr) {
            arr.splice(arr.indexOf(tag), 1);
        },
        Filter() {
            this.getList();
        },
        handleCurrentChange(val) {
            console.log(val);
            this.currentPage = val;
            this.getList();
        },
        handleSizeChange(val) {},
        getList() {
            var _this = this;
            actionurl.getUserList(
                {
                    name: _this.filterName,
                    pageOn: _this.currentPage,
                    pageNum: 10
                },
                function(re) {
                    if ((re.status = 1)) {
                        // _this.tableData5 = re.data;
                        _this.pagetotal = re.count;
                    } else {
                    }
                }
            );
        },
        addUser() {
            this.$router.push({ path: "/systemUserAdd/0" });
        },
        delList(row) {
            this.dialogVisible = true;
            this.scontent = "确定删除吗？";
            this.thisID = row.id;
        },
        confirm() {
            var _this = this;
            actionurl.delAttendant(
                {
                    id: _this.thisID
                },
                function(re) {
                    _this.$message(re.msg);
                    _this.dialogVisible = false;
                    if ((re.status = 1)) {
                        _this.getList();
                    } else {
                    }
                }
            );
        },
        editFn(row) {
            // this.$router.push({ path: "/systemUserAdd/" + row.id });
            this.dialogVisible = true;
            this.isAdd = false;
        }
    },
    created() {
        this.getList();
    }
};
</script>
